<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公文解析工具</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f5f5f5;
        }

        /* 页面分为上、中、下三部分 */
        .section {
            width: 80%;
            max-width: 600px;
            margin: 20px 0;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        /* 上传文件按钮样式 */
        .upload-btn {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .upload-btn:hover {
            background-color: #0056b3;
        }

        /* 解析按钮样式 */
        .parse-btn {
            padding: 10px 20px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .parse-btn:hover {
            background-color: #218838;
        }

        /* 文件名称展示 */
        .file-name {
            margin-top: 10px;
            font-size: 14px;
            color: #333;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: center;
        }

        th {
            background-color: #f8f9fa;
            font-weight: bold;
        }

        /* 加载中弹窗 */
        .loading-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .loading-content {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 文件上传部分 -->
    <div class="upload-section">
        <h2>上传公文文件</h2>
        <input type="file" id="fileInput" accept=".txt,.doc,.docx,.pdf">
        <button class="button" onclick="uploadFile()">上传</button>
        <p id="fileName"></p>
    </div>

    <!-- 解析结果部分 -->
    <div class="result-section">
        <h2>解析结果</h2>
        <button class="button" onclick="parseFile()">解析</button>
        <div id="parseResult"></div>
    </div>

    <!-- 结果表格 -->
    <div class="result-table">
        <h2>检查结果</h2>
        <table>
            <thead>
            <tr>
                <th>文件标题</th>
                <th>篇幅是否合规</th>
                <th>附件是否齐全</th>
            </tr>
            </thead>
            <tbody id="tableBody">
            <!-- 动态填充 -->
            </tbody>
        </table>
    </div>
</div>
<!-- 加载中弹窗 -->
<div class="loading-modal" id="loading-modal">
    <div class="loading-content">
        <p>正在加载中...</p>
    </div>
</div>

<script>
    let uploadedFileName = ''; // 存储上传的文件名
    let parseData = null; // 存储解析结果

    // 上传文件
    function uploadFile() {
        const fileInput = document.getElementById('fileInput');
        if (fileInput.files.length > 0) {
            const file = fileInput.files[0];
            console.log(file);
            uploadedFileName = file.name;
            document.getElementById('fileName').innerText = `已上传文件：${uploadedFileName}`;

            console.log(document.getElementById('fileInput'));
        } else {
            alert('请选择一个文件');
        }
    }



    // 解析文件
    function parseFile() {
        if (!uploadedFileName) {
            alert('请先上传文件');
            return;
        }

        // 显示加载中弹窗
        const loadingModal = document.getElementById('loading-modal');
        loadingModal.style.display = 'flex';


        const url = '/parse'; // 替换为实际的后端URL
        const formData = new FormData();
        console.log(document.getElementById('fileInput'));
        formData.append('file', document.getElementById('fileInput').files[0]);

        fetch(url, {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {


                // 隐藏加载中弹窗
                loadingModal.style.display = 'none';
                console.log("========"+data);
                /*console.log("sdfsd:::"+data);*/
                parseData = data; // 存储解析结果
                //document.getElementById('parseResult').innerText = JSON.stringify(data, null, 2);
                updateTable(data.result); // 更新表格


            })
            .catch(error => {
                console.error('解析失败:', error);
                alert('解析失败，请重试');
            });
    }

    // 生成总结
    function generateSummary() {
        if (!parseData) {
            alert('请先解析文件');
            return;
        }

        const url = 'https://your-backend-url.com/summary'; // 替换为实际的后端URL
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(parseData)
        })
            .then(response => response.json())
            .then(data => {

                document.getElementById('summaryResult').innerText = data.summary;
            })
            .catch(error => {
                console.error('总结失败:', error);
                alert('总结失败，请重试');
            });
    }

    // 更新表格
    function updateTable(data) {
        console.log("asdfasdf:::"+data);
        const tableBody = document.getElementById('tableBody');
        tableBody.innerHTML = `
                <tr>
                    <td>${data.docTitle }</td>
                    <td>${data.islengthcompliance }</td>
                    <td>${data.hasRequiredElements }</td>
                </tr>
            `;
    }
</script>
</body>
</html>